/* eslint react/no-string-refs:0 */
import React, { Component } from 'react';
import { Grid, Input, Button, Switch, DatePicker, Select, Message, Icon } from '@alifd/next';
import moment from 'moment';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import { ApiOfResourceList } from '#/utils/coreApiDefine'

const { Row, Col } = Grid;
const { RangePicker } = DatePicker;
const defaultTimeValues = [moment('09:00:00', 'HH:mm:ss', true), moment('23:59:59', 'HH:mm:ss', true)];

export default class Filter extends Component {
  static displayName = 'Filter';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    let search = {}
    // let storage = sessionStorage.getItem(this.props.match.url)
    // if(storage) {
    //   search = JSON.parse(storage).search
    // }
    this.state = {
      value: search,
      availableResrouceDS: [],
    };
  }

  filter() {
    if(!this.state.value.s_resourceCode) {
      Message.show({
          type: 'warning',
          content: '请先选择资源！',
          duration: 3000
      });
      return;
    }

    const search = {
      s_resourceCode: this.state.value.s_resourceCode
    }

    if(this.state.value.s_dateRange) {
      const startTime = this.state.value.s_dateRange[0].format('x');
      const endTime = this.state.value.s_dateRange[1].add(86399, 'seconds').format('x');
      search.s_startTime = startTime;
      search.s_endTime = endTime;
    }

    this.props.filter(search)
  }

  reset = () => {
    let that = this;
    this.setState({
      value: {}
    })
    setTimeout(function () {
      that.filter()
    }, 1)
  }

  formChange = (value) => {
    this.setState({
      value,
    });
  };

  handleSearch = (value) => {
    if (this.searchTimeout) {
      clearTimeout(this.searchTimeout);
    }
    this.searchTimeout = setTimeout(() => {
      // eslint-disable-next-line handle-callback-err
      if(value) {
        ApiOfResourceList({s_name: value}).then(response => {
          const { data } = response;
          let resourceKPs = data.map(function (item, key, ary) {
            return { value: item.code, label: item.name };
          });
          this.setState({
            availableResrouceDS: resourceKPs,
          });
        })
      } else {
        this.setState({availableResrouceDS: []});
      }
    }, 100);
  }

  componentWillUnmount = () => {
    clearInterval(this.state.intervalId)
  }

  onChange = (value) => console.log(value)

  onRangeOk = (value) => console.log('onOk: [%s, %s]', value[0].format('YYYY-MM-DD HH:mm:ss'), value[1].format('YYYY-MM-DD HH:mm:ss'));

  render() {
    return (
      <IceFormBinderWrapper
        value={this.state.value}
        onChange={this.formChange}
        ref="form"
      >
        <Row wrap gutter="20" style={styles.formRow}>
          <Col l="6">
            <div style={styles.formItem}>
              <span style={styles.formLabel}>资源：</span>
              <IceFormBinder name="s_resourceCode" triggerType="onBlur">
                <Select showSearch placeholder="资源名称" filterLocal={false} dataSource={this.state.availableResrouceDS} onSearch={this.handleSearch} size="small" style={{width: '100%'}}/>
              </IceFormBinder>
              <div style={styles.formError}>
                <IceFormError name="s_resourceCode" />
              </div>
            </div>
          </Col>
          <Col l="6">
            <div style={styles.formItem}>
              <span style={styles.formLabel}>日期：</span>
              <IceFormBinder name="s_dateRange" triggerType="onBlur">
                <RangePicker 
                  size="small"
                  onChange={this.onChange} 
                  onOk={this.onRangeOk} />
              </IceFormBinder>
              <div style={styles.formError}>
                <IceFormError name="s_dateRange" />
              </div>
            </div>
          </Col>
          <Col l="4">
            <div style={styles.formItem}>
               <Button onClick={this.filter.bind(this)} size="small" type="primary" >
                <Icon type="search" />查询
              </Button>
            </div>
          </Col>
        </Row>
      </IceFormBinderWrapper>
    );
  }
}

const styles = {
  container: {
    margin: '20px',
    padding: '0',
  },
  title: {
    margin: '0',
    padding: '20px',
    fonSize: '16px',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    color: 'rgba(0,0,0,.85)',
    fontWeight: '500',
    borderBottom: '1px solid #eee',
  },
  formRow: {
    padding: '10px 20px',
  },
  formItem: {
    display: 'flex',
    alignItems: 'center',
    margin: '10px 0',
  },
  formItemRight: {
    display: 'flex',
    alignItems: 'center',
    margin: '10px 0',
    float: 'right'
  },
  formComponent: {
    width: '150px',
  },
  formLabel: {
    minWidth: '70px',
  },
  submitButton: {
    marginLeft: '20px',
  },
};
